<template>
  <div>
    <div style="height: 40px; padding-top: 20px; padding-left: 10px;">
      <label style="float: left; margin-top: 3px; margin-right: 5px;">角色名称:</label>
      <el-input v-model="roleName" placeholder="角色名称" class="seache-user seache-username" clearable size="mini"></el-input>
      <el-button type="primary" class="seach" @click="query()" icon="el-icon-search" size="mini">搜索</el-button>
    </div>
    <el-button type="danger" style="float: left; margin: 15px 0 10px 25px;" size="mini"
      @click="deleteDalog()" v-show="hasPerms('role:delete:read')" icon="el-icon-delete"></el-button>
    <el-button type="primary" style="float: left; margin: 15px 0 10px 15px;" size="mini"  v-show="hasPerms('role:add:read')"
      @click="insertDialogVisible = true" icon="el-icon-plus">新增</el-button>
    <el-table :data="tableData" @selection-change="handleSelectionChange" border size="mini">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="roleId" label="id"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDes" label="角色描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click='updateDalog(scope.row)' v-show="hasPerms('role:edit:read')" icon="el-icon-edit"></el-button>
          <el-button type="success" size="mini" @click='authorDalog(scope.row)' v-show="hasPerms('role:author:read')">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <PageInfo class="page-class" :totalCount="totalCount" :pageSize="pageSize" @pageCurrent="pageCurrent" />
    <!-- 授权页面 -->
    <el-dialog title="添加授权" :visible.sync="authorDialogVisible" width="30%" :before-close="handleClose">
      <el-tree :data="treeData" show-checkbox node-key="id" default-expand-all :default-checked-keys="menuChoose"
        :props="defaultProps" ref="tree">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="authorDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSumbit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑页面 -->
    <RoleEditView :editDialog="editDialogVisible" :roleInfo="roleInfo" @editDialogFormVisible="chidAddRole" />
    <!-- 新增页面 -->
    <RoleAddView :dialog="insertDialogVisible" @insertDialogFormVisible="chidAddRole" />
  </div>
</template>
<script>
import PageInfo from '../PageInfo.vue';
import { hasPermission } from '@/permission/index.js';
import RoleAddView from './roleAddView.vue';
import RoleEditView from './roleEditView.vue';
export default {
  data() {
    return {
      tableData: [],
      current: 1,
      pageSize: 8,
      totalCount: 0,
      ids: [],
      roleName: '',
      authorDialogVisible: false,
      editDialogVisible: false,
      insertDialogVisible: false,
      treeData: [],
      menuChoose: [],
      //映射后端的值
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      roleId: '',
      roleInfo:{}
    
    }
  },
  components: {
    PageInfo,
    RoleAddView,
    RoleEditView
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let reqUser = {
        "current": this.current,
        "size": this.pageSize,
      }
      this.$http({
        method: 'post',
        url: '/admin/role/pageList',
        data: reqUser
      }).then(res => {
        this.tableData = res.data.data.data
        this.totalCount = res.data.data.total
      }).catch(error => {
        console.log(statusCode)
        this.$message({
              message: "服务器系统异常",
              center: true,
              type: 'warning'
            })
      })
    },
    pageCurrent(res) {
      this.current = res;
      this.getData();
    },
    query() {
      this.getData();
    },
    //勾选复选框赋值给ids，用于删除操作。
    handleSelectionChange(row) {
      this.ids.length = 0;
      console.log(this.ids.length)
      for (let i = 0; i < row.length; i++) {
        this.ids.push(row[i].id);
      }
      console.log(this.ids.length)
    },
    //删除逻辑
    deleteDalog: function () {
      let newIds = this.ids;
      if (newIds.length <= 0) {
        this.$message({
          message: "请选择要删除的角色",
          center: true,
          type: 'warning'
        })
        return
      }
      this.$confirm('此操作将永久删除数据，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'delete',
          url: '/admin/userInfo/delete/' + newIds,
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success'
            });
            //刷新列表
            this.getData();
          } else {
            this.$message({
              showClose: true,
              message: '操作失败',
              type: 'success'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: '已取消删除'
        });
      })
    },
    //授权弹窗
    authorDalog(row) {
      this.roleId = row.roleId;
      this.authorDialogVisible = true
      this.$http({
        method: 'get',
        url: '/admin/role/author/' + row.roleId
      }).then(res => {
        let result = res.data;
        if (result.code == 200) {
          this.treeData = result.data
          this.menuChoose = []
          this.getMenuChoose(result.data);
        }
      })
    },
    getMenuChoose(children) {
      for (let item of children) {
        if (item.checked && item.btoType == 3) {
          this.menuChoose.push(item.id);
        }
        if (item.child) {
          this.getMenuChoose(item.child)
        }
      }
    },
    handleClose() {
      this.authorDialogVisible = false;
      this.editDialogVisible = false;
      this.insertDialogVisible = false;
    },
    //获取勾选节点
    onSumbit() {
      console.log(this.roleId)
      //半选状态的节点
      let parentId = this.$refs.tree.getHalfCheckedKeys();
      //已经明确选中的节点
      let menuIds = this.$refs.tree.getCheckedKeys();
      let newMenuIds = parentId.concat(menuIds);
      console.log(newMenuIds)
      let data = {
        "roleId": this.roleId,
        "menus": newMenuIds
      }
      this.$http({
        method: 'post',
        url: '/admin/role/authorMenu/',
        Headers:{
          'Content-Type':'application/json'
        },
        data: data
      }).then(res => {
        let result = res.data;
        if (result.code == 200) {
          this.$message({
            type:'success',
            message:'操作成功'
          })
          this.authorDialogVisible = false;
        }
      })
    },
    //updateDalog
    updateDalog(row){
      this.roleId = row.roleId;
      this.editDialogVisible = true;
      this.roleInfo = row;
    },
    hasPerms: function(perms){
      return hasPermission(perms);
    },
    chidAddRole(data) {
      this.insertDialogVisible = data;
      this.editDialogVisible = data;
      this.getData();
    }

  }
}

</script>

<style>
.seache-user {
  width: 180px;
  float: left;
}

.seach {
  float: left;
  margin-left: 20px;
}

.delete-user-btn {
  float: left;
  margin-bottom: 10px;
}

#table-user {
  height: 100%;
}

.el-dialog {
  width: 40%;
  text-align: left;
}

.inser-input {
  width: 270px;
  float: left;
}

.dialog-footer {
  text-align: center;
}

/* 用户头像 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>